<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{path:'/home'}">首页</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-row :gutter="25">
        <!--搜索区域-->
        <el-col :span="10">
          <el-input placeholder="请输入政治面貌" v-model="queryInfo.studentPolitics" clearable >
            <el-button slot="append" icon="el-icon-search" @click="getPercentage"></el-button>
          </el-input>
        </el-col>
      </el-row>

      <!--列表部分-->
      <el-table :data="politicsList" border stripe>
        <el-table-column type="index"></el-table-column>
        <el-table-column label="该政治面貌占比" prop="politics"></el-table-column>
      </el-table>
    </el-card>
  </div>
</template>
<script>
export default {
  data(){
    return{
      //查询信息实体
      queryInfo:{
        studentPolitics:"",
      },
      politicsList:[],
    }
  },
  created(){
    this.getPercentage();
  },
  methods:{
    async getPercentage(){
      console.log(this.queryInfo.studentPolitics)
      const {data:res} = await this.$http.get("/politics",{params:this.queryInfo});
      if (res.flag == "ok") {
        this.politicsList = res.data; //数据封装学生数据
      }
    },
  }

}
</script>
<style lang="less" scoped>
.el-breadcrumb{
  margin-bottom: 15px;
  font-size: 17px;
}
</style>
